How to Resolve "Uncaught SyntaxError: Cannot use import statement outside a module" in JavaScript

 When working with JavaScript, particularly ECMAScript 6 (ES6) modules, you might encounter the error:

javascript

Uncaught SyntaxError: Cannot use import statement outside a module

This error often occurs when you're trying to use the import statement in a script that isn't recognized as a module by the browser or Node.js. Here’s a detailed guide to resolve this issue, illustrated with an example involving ArcGIS JSAPI and milsymbol.js.

SyntaxError: Cannot use import statement outside a module" in JavaScript

You’re using ArcGIS JSAPI 4.12 and want to incorporate milsymbol.js for drawing military symbols on a map. Your initial code looks like this:

html

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/FeatureLayer"
    ], function (Map, MapView, MapImageLayer, FeatureLayer) {
        var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }).asCanvas(3);
        var map = new Map({
            basemap: "topo-vector"
        });

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [121, 23],
            zoom: 7
        });
    });
</script>

You encounter errors whether you add type="module" or not. Let's address the issues step-by-step.

Step-by-Step Solution Of SyntaxError: Cannot use import statement outside a module" in JavaScript

1. Use the Correct Script Type: Ensure your script tags for ES6 modules have type="module".

   html
   
   <script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
   

2. Load the Correct File: If you're using a module, ensure you're loading the right bundled file. For milsymbol.js, you should use the distributed (dist) version instead of the source (src) version.

   html
   
   <script src="node_modules/milsymbol/dist/milsymbol.js"></script>
   

3. Ensure Proper Scope: When using ES6 modules, variables are not automatically placed in the global scope. Adjust your code to ensure variables are accessible where needed.

   
   <script type="module">
       import { ms } from './milsymbol.js';
   
       require([
           "esri/Map",
           "esri/views/MapView",
           "esri/layers/MapImageLayer",
           "esri/layers/FeatureLayer"
       ], function (Map, MapView, MapImageLayer, FeatureLayer) {
           var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }).asCanvas(3);
           var map = new Map({
               basemap: "topo-vector"
           });
   
           var view = new MapView({
               container: "viewDiv",
               map: map,
               center: [121, 23],
               zoom: 7
           });
       });
   </script>
   

Additional Tips

1. For Node.js Environments: If you're running Node.js and using ES6 modules, ensure your package.json includes:

   json
   {
     "type": "module"
   }
   

   This tells Node.js to treat .js files as ES6 modules.

2. Using require in Node.js: If you must mix require and import, consider using a bundler like Webpack or Babel to handle the different module types seamlessly.

   javascript
   
   const { parse } = require('node-html-parser');
   

Conclusion

Handling ES6 modules correctly requires understanding whether you're in a browser or Node.js environment and ensuring scripts are loaded with the appropriate type. Use type="module" in browser scripts, ensure proper file paths, and adjust scope handling to avoid reference errors. Following these steps will help you resolve the "Uncaught SyntaxError: Cannot use import statement outside a module" error effectively.